<template>
  <div class="hello_user">
    <Modal
      v-model="helloModal"
      width="600"
      :closable="false">
      <div class="hello_img">
        <img src="../assets/imgs/hello_user1.jpg" alt="">
      </div>
      <div class="footer" slot="footer">
        <button @click="helloModal = false">
          <span class="iconfont icon-close"></span>
        </button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "hello_user",  // 欢迎使用
    data() {
      return {
        helloModal: false,
        localFlag: false,
      }
    },
    watch: {
      helloModal: {
        handler(newVal) {
          if(this.helloModal !== this.localFlag) {
            localStorage.setItem('hello_user', newVal)
          }
        }
      }
    },
    mounted() {
      this.getHelloModal()
    },
    methods: {
      getHelloModal() {
        let flag = JSON.parse(localStorage.getItem('hello_user'));
        this.localFlag = flag;
        if(flag===true || flag===false) {
          this.helloModal = flag
        }else{
          this.helloModal = true
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .ivu-modal{
    top: 300px;
    .ivu-modal-content{
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      .ivu-modal-header,
      .ivu-modal-body,
      .ivu-modal-footer{
        padding: 0;
        border: none;
      }
      .hello_img{
        width: 600px;
        height: 260px;
        background-image: linear-gradient(to bottom, #fff, rgba(0,255,0,0.1));
        img{
          width: 100%;
          height: 100%;
        }
      }
      button{
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
        background: transparent;
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
      }
    }
  }
</style>
